import React, { Component } from 'react';
import { Modal, Form, Input, message,DatePicker } from 'antd';
import axios from 'axios';


export default class Adduser extends Component {
  state={videourl: '请稍等···',addTime:''}

  formRef = React.createRef();//重置表单没有实现

  cancelForm = () => {
    this.formRef.current.resetFields();
    this.props.close()
  }

  handleSubmit = () => {
    let that=this;

    this.formRef.current.validateFields()
      .then(values => {
        message.info('添加成功！');
        this.cancelForm();
        // console.log(values);

        values.video_time=this.state.addTime;
        values.video_url=this.state.videourl;
        
        this.props.adduser(values);
        const token = localStorage.getItem('token');
        if (token) {
          axios.post("https://wx.xxmtcds.top:2333/admin/video", values, {
            headers: { 'authorization': `${token}` }
          })
            .then(function (response) {
              console.log(response);
              that.props.get();
            })
            .catch(err => console.log(err))
        }
      }).catch(errorInfo => {
        // console.log(errorInfo);
        message.error('添加失败！');
      })
  }


  videoitem=(e)=>{
    let that=this;

    let audio=document.getElementById('videoitem').files[0];
 
      var formData=new FormData();
      formData.append('video',audio);
     
      const token=localStorage.getItem('token');
      if(token){
          // console.log(token);
          axios.post("https://wx.xxmtcds.top:2333/admin/storevideo",formData,{
            headers: { 'authorization': `${token}`,'content-type':'multipart/form-data' }
          })
            .then(function(response){
              that.setState({videourl: response.data})
              // console.log(response.data);
            })
            .catch(err=>console.log(err))
    }
  }

  onChange=(date, dateString)=>{
    // console.log(dateString);
    this.setState({addTime:dateString})
  }

  render() {
    return (

      <Modal
        title='添加一个视频吧'
        okText='确定'
        cancelText='取消'
        visible={this.props.visible}
        onCancel={this.cancelForm}
        onOk={this.handleSubmit}>
        <Form
          ref={this.formRef}
          layout="horizontal"
          labelCol={{ span: 4 }}//不能超过24
          wrapperCol={{ span: 10 }}>

          <Form.Item name="video_author" label='作者'
            rules={[{
              message: '请输入作者',
            }]}>
            <Input placeholder='用户名' />
          </Form.Item>
          <Form.Item name="video_time" label='时间'>
             <DatePicker onChange={this.onChange} placeholder='选择添加日期'/>
          </Form.Item>
          <Form.Item name="video_url" label='url'>
            <Input placeholder={this.state.videourl} disabled={true}/>
            <input type='file' placeholder='上传视频' accept=".mp4" name="storefile" onChange={this.videoitem} id="videoitem"/>
          
          </Form.Item>
        </Form>
      </Modal>


    );
  }
}



